<template>
  <div>
    <el-container>
      <el-header>
        <span>我的投递</span>
      </el-header>
    </el-container>
    <div class="graduate-info">
      <div class="status-button">
        <el-button size="mini">状态描述:</el-button>
        <el-button type="primary" size="mini" class="second-button"
          >1:已投递</el-button
        >
        <el-button type="success" size="mini">2:流程中</el-button>
        <el-button type="info" size="mini">3:录用成功</el-button>
        <el-button type="warning" size="mini">4:流程终止</el-button>
        <el-button type="danger" size="mini">5:撤销投递</el-button>
      </div>
      <el-table :data="tableData" style="width: 820px; margin-left: 270px">
        <el-table-column label="投递日期" width="260">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.time"
              type="datetime"
              :readonly="true"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          label="岗位名称"
          prop="name"
          width="180"
        ></el-table-column>
        <el-table-column
          label="投递状态"
          prop="status"
          width="180"
        ></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >撤销投递</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <div class="delivery-pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="pageInfo.current"
          :page-size="pageInfo.pageSize"
          :page-count="11"
          :hide-on-single-page="false"
          :total="total"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </div>
    <el-container>
      <el-footer>
        <div>
          <span>专注于互联网校招</span>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "RecommendGraduatedelivery",

  data() {
    return {
      tableData: [],
      pageInfo: {
        current: 1,
        pageSize: 5,
      },
      deliveryObj: {
        did: 0,
      },
      total: 0,
    };
  },

  mounted() {
    this.loadData();
  },

  watch: {
    tableData(newVal) {
      console.log(newVal);
      if (newVal != null) {
        return;
      } else {
        this.$notify({
          title: "温馨提示",
          message: "暂无投递记录",
          type: "warning",
        });
      }
    },
  },

  methods: {
    // 加载数据
    loadData() {
      this.$axios
        .post("/delivery/queryMyDelivery", this.pageInfo)
        .then((res) => {
          if (res.data.result.list != null) {
            this.tableData = res.data.result.list;
            this.total = res.data.result.totalCounts;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 撤销投递
    handleEdit(index, row) {
      console.log(index, row);
      this.deliveryObj.did = row.did;
      this.$axios
        .post("/delivery/revokeDelivery", this.deliveryObj)
        .then((res) => {
          var response = res.data.desc;
          if (response === "撤销失败") {
            this.$message({
              message: "撤销失败",
              type: "error",
            });
            return;
          } else if (response === "撤销成功") {
            this.$message({
              message: "撤销成功",
              type: "success",
            });
            this.loadData();
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 删除记录
    handleDelete(index, row) {
      console.log(index, row);
      this.deliveryObj.did = row.did;
      this.$axios
        .post("/delivery/deleteDelivery", this.deliveryObj)
        .then((res) => {
          var response = res.data.desc;
          if (response === "删除失败") {
            this.$message({
              message: "删除失败",
              type: "error",
            });
            return;
          } else if (response === "删除成功") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.loadData();
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 分页
    pageChange(e) {
      console.log(e);
      this.pageInfo.current = e;
      this.loadData();
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #409eff;
  color: white;
  line-height: 60px;
}

.el-footer {
  background-color: #409eff;
  color: white;
  line-height: 60px;
}

.el-footer div {
  margin-left: 43%;
}

.graduate-info {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 480px;
  background: whitesmoke;
  background-image: url(https://img2.baidu.com/it/u=1704860233,2657475479&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=250);
  background-size: 1355px 480px;
}

.delivery-pagination {
  margin: 15px 600px;
}

.status-button {
  margin-left: 29%;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
